html, body {
    height: 150%;
    margin: 0px;
    padding: 5px; 
    background-color: #E2ECEE; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #545454;
}
  
header {
    width: 100%; 
    height: 135px; 
    background:#373535; 
    font-size: 2em; 
    text-align: 
    left; clear: both;
    background: url(../Imagenes/logo.png) no-repeat;  
}

footer {
    width: 100%; 
    height: 135px; 
    background:#373535; 
    font-size: 2em; 
    text-align: 
    left; clear: both;
    /* background: url(../Imagenes/logo.png) no-repeat;  */
}
section { 
   position: relative; 
}

h1, h2, h3 {
	margin: 0;
	padding: 5px;
	text-transform: uppercase;
	font-weight: 300;
	font-family: 'Oswald', sans-serif;
}

#wrapper {
	overflow: hidden;
	width: 800px;
	margin: 10px auto;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
}

#pagina {
	overflow: hidden;
	width: 700px;
	padding: 50px 50px;
	background: #2E2E2E;
	color: #919191;
}

.container {
	width: 800px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}

#content {
	float: left;
	width: 380px;
}

/*Dividir la pantalla en dos */
#izquierda { 
    position: relative; 
	width: 50%; 
	top: 0; 
	left: 0; 
	background:; 
	float: left; 
	height: 360px; 
 }
 #derecha { 
    position: relative; 
	width: 50%; 
	top: 0; 
	right: 0; 
	background:; 
	float: right; 
	height: 360px; 
  }
 .esqinfder { 
 position: absolute; bottom: 5px; right: 5px; background: #ff0; 
 }

/*Botones en 3d*/

.boton {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	padding: 6px 10px;
	font-size: 14px;
	border-radius: 10px;
	background-color: #666666;	
	box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	display: inline-block;
	font-family: Arial, Helvetica, sans;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}

.boton:hover {
	box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
	color: #fff !important;
}

.boton:active {
	top: 5px;
	box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 4px rgba(0,0,0,0.2);	
	color: #fff !important;
}

.formaBoton {
	border-radius: 0px;	
	padding-left: 20px;
	padding-right: 20px;
}

.colorRojo {	
	background-color: #c34747;	
	box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.colorRojo:hover {
	box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.colorRojo:active {
	box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}



/***********LISTA DE COLORES ****************/

/*ANARANJADO*/
.anaranjado {	
	background-color: #c37846;	
	box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.anaranjado:hover {
	box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);	
}

.anaranjado:active {
	box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);	
}

/*VERDE*/
.verde {	
	background-color: #7fc345;	
	box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.verde:hover {
	box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.verde:active {
	box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);	
}

/*ROSADO*/
.rosa {
	box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
	background-color: #d7298b;
}

.rosa:hover {
	box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.rosa:active {
	box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

/*AZUL*/
.azul {
	background: #2a8ad8;
	box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.azul:hover {
	box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.azul:active {
	box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

/*PURPURA*/
.purpura {
	background-color: #8a26d3;
	box-shadow: 0 2px 2px #54307b, 0 9px 0 #3f255e, 0px 6px 7px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purpura:hover {
	box-shadow: 0 2px 2px #54307b, 0 9px 0 #3f255e, 0px 6px 7px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.purpura:active {
	box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}

/*NEGRO*/
.negro {
	background-color: #2E2E2E;
	box-shadow: 0 2px 2px #2E2E2E, 0 9px 0 #2E2E2E, 0px 6px 7px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.negro:hover {
	box-shadow: 0 2px 2px #2E2E2E, 0 9px 0 #2E2E2E, 0px 6px 7px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}

.negro:active {
	box-shadow: 0 2px 0 #2E2E2E, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
}




/*Tablas*/

.tabla {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 text-align: right;
 width: 100%;

}

.tabla th {
 padding: 5px;
 font-size: 16px;
 background-color: #83aec0;
 background-repeat: repeat-x;
 color: #FFFFFF;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #558FA6;
 border-bottom-color: #558FA6;
 font-family: "Trebuchet MS", Arial;
 text-transform: uppercase;
 }

.tabla .modo1 {
 font-size: 12px;
 font-weight:bold;
 background-color: #e2ebef;
 background-repeat: repeat-x;
 color: #34484E;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo1 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo1 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color: #e2ebef;
 background-repeat: repeat-x;
 color: #34484E;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }

/*Fondo blanco y texto rojo*/

.tabla .modo2 {
 font-size: 12px;
 font-weight:bold;
 background-color: #fdfdf1;
 background-repeat: repeat-x;
 color: #990000;
 font-family: "Trebuchet MS", Arial;
 text-align:left;
 }
 .tabla .modo2 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #EBE9BC;
 border-bottom-color: #EBE9BC;
 }
 .tabla .modo2 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 background-color: #fdfdf1;
 background-repeat: repeat-x;
 color: #990000;
 font-family: "Trebuchet MS", Arial;
 text-align:left;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #EBE9BC;
 border-bottom-color: #EBE9BC;
 }


 .tabla .modo3 {
 font-size: 12px;
 font-weight:bold;
 background-color:#00bf5f;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo3 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo3  th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color:#00bf5f;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }

.tabla .modo4 {
 font-size: 12px;
 font-weight:bold;
 background-color: #cc0033;
 background-repeat: repeat-x;
 color: #FFFFFF;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo4 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo4 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color: #cc0033;
 background-repeat: repeat-x;
 color: #FFFFFF;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }

.tabla .modo5 {
 font-size: 12px;
 font-weight:bold;
 background-color: #ccff00;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo5 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo5 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color:  #8cff00;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }
 
 
.tabla .modo6 {
 font-size: 12px;
 font-weight:bold;
 background-color: #7842d6;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo6 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo6 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color:  #7842d6;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }
 
 
.tabla .modo7 {
 font-size: 12px;
 font-weight:bold;
 background-color: #0194a9;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 }
 .tabla .modo7 td {
 padding: 5px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 text-align:left;
 }


.tabla .modo7 th {
 background-position: left top;
 font-size: 12px;
 font-weight:bold;
 text-align: left;
 background-color: #0194a9;
 background-repeat: repeat-x;
 color: #000000;
 font-family: "Trebuchet MS", Arial;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #A4C4D0;
 border-bottom-color: #A4C4D0;
 }
 
 








 







